<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>首页</title>
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/home.css">
	<link rel="stylesheet" href="./lib/swiper/css/swiper-bundle.min.css">
	<style>
     .mySwiper .swiper-slide:nth-child(n) {
        width: 80%;
      }
	</style>
</head>

<body>
	<header class="header">
		<div class="header_nav">
			<a href="register.html"><img class="more" src="./img/home/img_21.png" alt=""></a>
			<span class="text">本家</span>
			<img class="search" src="./img/home/img_18.png" alt="">
		</div>
		<div class="header_banner">
			<div class="swiper head_banner">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><img class="banner" src="./img/home/img_43.jpg" alt=""></div>
					<div class="swiper-slide"><img class="banner" src="./img/home/img_43.jpg" alt=""></div>
					<div class="swiper-slide"><img class="banner" src="./img/home/img_43.jpg" alt=""></div>
				</div>
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</div>
		</div>
		<ul class="bottom">
			<li><img class="recommend_icon" src="./img/home/img_26.png" alt="">
				<div class="icon_text">新品/热销</div>
			</li>
			<li><img class="recommend_icon" src="./img/home/img_29.png" alt="">
				<div class="icon_text">超值拼团</div>
			</li>
			<li><img class="recommend_icon" src="./img/home/img_33.png" alt="">
				<div class="icon_text">新人福利</div>
			</li>
			<li><img class="recommend_icon" src="./img/home/img_35.png" alt="">
				<div class="icon_text">时尚动态</div>
			</li>
		</ul>
	</header>
	<div class="excellent_course">
		<div class="color">
			<div class="top_text">
				<div class="excellent_course_text">精品热卖</div>
				<div class="line"></div>
				<div class="small_title"><img src="./img/home/img_11.png" alt=""></div>
			</div>
			<div class="product">
				<ul>
					<li>
						<img class="product_commodity" src="./img/home/img_07.jpg" alt="">
						<div class="product_text">英式经典三防女式长风衣</div>
						<div class="product_price">￥599</div>
					</li>
					<li>
						<img class="product_commodity" src="./img/home/img_07.jpg" alt="">
						<div class="product_text">英式经典三防女式长风衣</div>
						<div class="product_price">￥599</div>
					</li>
					<li>
						<img class="product_commodity" src="./img/home/img_07.jpg" alt="">
						<div class="product_text">英式经典三防女式长风衣</div>
						<div class="product_price">￥599</div>
					</li>
					<li>
						<img class="product_commodity" src="./img/home/img_07.jpg" alt="">
						<div class="product_text">英式经典三防女式长风衣</div>
						<div class="product_price">￥599</div>
					</li>
					<li>
						<img class="product_commodity" src="./img/home/img_07.jpg" alt="">
						<div class="product_text">英式经典三防女式长风衣</div>
						<div class="product_price">￥599</div>
					</li>
					<li>
						<img class="product_commodity" src="./img/home/img_07.jpg" alt="">
						<div class="product_text">英式经典三防女式长风衣</div>
						<div class="product_price">￥599</div>
					</li>
			</div>
		</div>
		<div class="gray_block">
			<div class="color">
				<div class="top_text">
					<div class="excellent_course_text">精品热卖</div>
					<div class="line"></div>
					<div class="small_title"><img src="./img/home/img_11.png" alt=""></div>
				</div>
				<div class="swiper mySwiper">
					<div class="swiper-wrapper">
					  <div class="swiper-slide"><div class="excellent_optimization">
						<div class="list">
							<img class="excellent_optimization_img" src="./img/home/img_31.jpg" alt="">
							<div class="excellent_optimization_box"><span
									class="excellent_optimization_text">本家HOME</span><span
									class="excellent_optimization_price">29.9元起</span></div>
							<div class="excellent_optimization_discounts">每满100立减20元</div>
						</div>
					</div></div>
					  <div class="swiper-slide"><div class="excellent_optimization">
						<div class="list">
							<img class="excellent_optimization_img" src="./img/home/img_31.jpg" alt="">
							<div class="excellent_optimization_box"><span
									class="excellent_optimization_text">本家HOME</span><span
									class="excellent_optimization_price">29.9元起</span></div>
							<div class="excellent_optimization_discounts">每满100立减20元</div>
						</div>
					</div></div>
					  <div class="swiper-slide"><div class="excellent_optimization">
						<div class="list">
							<img class="excellent_optimization_img" src="./img/home/img_31.jpg" alt="">
							<div class="excellent_optimization_box"><span
									class="excellent_optimization_text">本家HOME</span><span
									class="excellent_optimization_price">29.9元起</span></div>
							<div class="excellent_optimization_discounts">每满100立减20元</div>
						</div>
					</div></div>
					</div>
				  </div>
				
			</div>
		</div>
		<div class="gray_block">
			<div class="color">
				<div class="top_text">
					<div class="excellent_course_text">精品热卖</div>
					<div class="line"></div>
					<div class="small_title"><img src="./img/home/img_11.png" alt=""></div>
				</div>
				<div class="good_things_to_Recommend">
					<ul>
						<li>
							<img class="good_things_to_Recommend_img" src="./img/home/img_30.jpg" alt="">
							<div class="good_things_to_Recommend_img_title">狐步小吊灯</div>
							<div class="good_things_to_Recommend_img_text">曼妙裙摆 任意空间的光线舞者</div>
							<div class="good_things_to_Recommend_img_price">￥469</div>
						</li>
						<li>
							<img class="good_things_to_Recommend_img" src="./img/home/img_33.jpg" alt="">
							<div class="good_things_to_Recommend_img_title">折简餐具组|碗套装</div>
							<div class="good_things_to_Recommend_img_text">国画四色 诠释最美器具</div>
							<div class="good_things_to_Recommend_img_price">￥89</div>
						</li>
						<li>
							<img class="good_things_to_Recommend_img" src="./img/home/img_30.jpg" alt="">
							<div class="good_things_to_Recommend_img_title">狐步小吊灯</div>
							<div class="good_things_to_Recommend_img_text">曼妙裙摆 任意空间的光线舞者</div>
							<div class="good_things_to_Recommend_img_price">￥469</div>
						</li>
						<li>
							<img class="good_things_to_Recommend_img" src="./img/home/img_33.jpg" alt="">
							<div class="good_things_to_Recommend_img_title">折简餐具组|碗套装</div>
							<div class="good_things_to_Recommend_img_text">国画四色 诠释最美器具</div>
							<div class="good_things_to_Recommend_img_price">￥89</div>
						</li>
						<li>
							<img class="good_things_to_Recommend_img" src="./img/home/img_30.jpg" alt="">
							<div class="good_things_to_Recommend_img_title">狐步小吊灯</div>
							<div class="good_things_to_Recommend_img_text">曼妙裙摆 任意空间的光线舞者</div>
							<div class="good_things_to_Recommend_img_price">￥469</div>
						</li>
						<li>
							<img class="good_things_to_Recommend_img" src="./img/home/img_33.jpg" alt="">
							<div class="good_things_to_Recommend_img_title">折简餐具组|碗套装</div>
							<div class="good_things_to_Recommend_img_text">国画四色 诠释最美器具</div>
							<div class="good_things_to_Recommend_img_price">￥89</div>
						</li>
						<li>
							<img class="good_things_to_Recommend_img" src="./img/home/img_30.jpg" alt="">
							<div class="good_things_to_Recommend_img_title">狐步小吊灯</div>
							<div class="good_things_to_Recommend_img_text">曼妙裙摆 任意空间的光线舞者</div>
							<div class="good_things_to_Recommend_img_price">￥469</div>
						</li>
						<li>
							<img class="good_things_to_Recommend_img" src="./img/home/img_33.jpg" alt="">
							<div class="good_things_to_Recommend_img_title">折简餐具组|碗套装</div>
							<div class="good_things_to_Recommend_img_text">国画四色 诠释最美器具</div>
							<div class="good_things_to_Recommend_img_price">￥89</div>
						</li>
						<li>
							<img class="good_things_to_Recommend_img" src="./img/home/img_30.jpg" alt="">
							<div class="good_things_to_Recommend_img_title">狐步小吊灯</div>
							<div class="good_things_to_Recommend_img_text">曼妙裙摆 任意空间的光线舞者</div>
							<div class="good_things_to_Recommend_img_price">￥469</div>
						</li>
						<li>
							<img class="good_things_to_Recommend_img" src="./img/home/img_33.jpg" alt="">
							<div class="good_things_to_Recommend_img_title">折简餐具组|碗套装</div>
							<div class="good_things_to_Recommend_img_text">国画四色 诠释最美器具</div>
							<div class="good_things_to_Recommend_img_price">￥89</div>
						</li>
						<li>
							<img class="good_things_to_Recommend_img" src="./img/home/img_30.jpg" alt="">
							<div class="good_things_to_Recommend_img_title">狐步小吊灯</div>
							<div class="good_things_to_Recommend_img_text">曼妙裙摆 任意空间的光线舞者</div>
							<div class="good_things_to_Recommend_img_price">￥469</div>
						</li>
						<li>
							<img class="good_things_to_Recommend_img" src="./img/home/img_33.jpg" alt="">
							<div class="good_things_to_Recommend_img_title">折简餐具组|碗套装</div>
							<div class="good_things_to_Recommend_img_text">国画四色 诠释最美器具</div>
							<div class="good_things_to_Recommend_img_price">￥89</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="bottom_fixed">
			<div class="fixed_bottom">
				<a href="index.html">
					<div class="item"><img src="./img/home/img_03.png" alt="">
						<div>首页</div>
					</div>
				</a>
				<a href="optimization.html">
					<div class="item"><img src="./img/home/2.png" alt="">
						<div>优选</div>
					</div>
				</a>
				<a href="classify.html">
					<div class="item"><img src="./img/home/3.png" alt="">
						<div>分类</div>
					</div>
				</a>
				<a href="shopping_trolley.html">
					<div class="item"><img src="./img/home/4.png" alt="">
						<div>购物车</div>
					</div>
				</a>
				<a href="./personal_center.html">
					<div class="item"><img src="./img/home/5.png" alt="">
						<div>我的</div>
					</div>
				</a>
			</div>
		</div>
	</div>
	<div class="up_arrow"><img src="./img/home/img_06.png" alt=""></div>
	<script src="./lib/swiper/js/swiper-bundle.min.js"></script>
	<script>
		 var swiper = new Swiper(".head_banner", {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
	  var swiper = new Swiper(".mySwiper", {
        slidesPerView: "auto",
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
	</script>
</body>


</html>